// 统计第一级
import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Platform,
    ScrollView,
    Dimensions,
    ActivityIndicator
} from 'react-native';
import { Pie } from 'react-native-pathjs-charts'
import Navigator from '../Main/navigator' //导航栏
import ColorMark from './statisicalColorMark'  //颜色标示view
import StatisicalItem from './statisicalItem'  //中间部分
import StatisocalBottom from './statisicalBottom' //底部

var {width,height} = Dimensions.get('window');
export default class Statisical extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            pieDataAry : []
        };
    }

    render() {
        const ary = this.state.pieDataAry

        if(ary.length > 0){

            let data = [{
                "name": " ",
                "population": ary[0].proportion,
                "color": {'r':69,'g':139,'b':0}
            }, {
                "name": " ",
                "population": ary[1].proportion,
                "color": {'r':70,'g':130,'b':180}
            }, {
                "name": " ",
                "population": ary[2].proportion,
                "color": {'r':255,'g':0,'b':0}
            }, {
                "name": " ",
                "population": ary[3].proportion,
                "color": {'r':139,'g':131,'b':120}
            },{
                "name": " ",
                "population": ary[4].proportion,
                "color": {'r':223,'g':154,'b':20}
            }]

            let options = {
                margin: {
                    top: 20,
                    left: 20,
                    right: 20,
                    bottom: -20
                },
                width: 250,
                height: 250,
                color: '#2980B9',
                r: 0,
                R: 0,
                legendPosition: 'topLeft',
                animate: {
                    type: 'oneByOne',
                    duration: 200,
                    fillTransition: 3
                }
            }

            let description = '占' + ary[0].proportion + '%,' + '共' + ary[0].count + '首歌曲'
            let description1 = '占' + ary[1].proportion + '%,' + '共' + ary[1].count + '首歌曲'
            let description2 = '占' + ary[2].proportion + '%,' + '共' + ary[2].count + '首歌曲'
            let description3 = '占' + ary[3].proportion + '%,' + '共' + ary[3].count + '首歌曲'
            let description4 = '占' + ary[4].proportion + '%,' + '共' + ary[4].count + '首歌曲'


            return (
                <View>
                    {/*导航栏*/}
                    <Navigator
                        centerText = '统计'
                        leftAction = {()=>this.leftAction()}
                        rightAction = {() => this.rightAction()}
                    />
                    <ScrollView style={{height:height,backgroundColor:'#DEDEDE'}}>
                        {/*文字*/}
                        <View style={{alignItems:'center',backgroundColor:'white'}}>
                            <Text style={{marginTop:5,marginBottom:5}}>您常听的类型</Text>
                        </View>
                        {/*圆*/}
                        <View style={{backgroundColor:'white',marginTop:1}}>
                            <Pie
                                data={data}
                                options={options}
                                accessorKey="population"
                            />
                            {/*颜色标示*/}
                            <View style={{position:'absolute',right:20,top:50}}>
                                <ColorMark color = 'rgb(69,139,0)' txt = {ary[0].type}/>
                                <ColorMark color = 'rgb(70,130,180)' txt = {ary[1].type}/>
                                <ColorMark color = 'rgb(255,0,0)' txt = {ary[2].type}/>
                                <ColorMark color = 'rgb(139,131,120)' txt = {ary[3].type}/>
                                <ColorMark color = 'rgb(223,154,20)' txt = {ary[4].type}/>
                            </View>
                        </View>
                        {/*中间部分*/}
                        <StatisicalItem color = 'rgb(69,139,0)' topTxt = {ary[0].type} bottomTxt = {description} mynavigator = {this.props.navigator} />
                        <StatisicalItem color = 'rgb(70,130,180)' topTxt = {ary[1].type} bottomTxt = {description1} mynavigator = {this.props.navigator} />
                        <StatisicalItem color = 'rgb(255,0,0)' topTxt = {ary[2].type} bottomTxt = {description2} mynavigator = {this.props.navigator}/>
                        <StatisicalItem color = 'rgb(139,131,120)' topTxt = {ary[3].type} bottomTxt = {description3} mynavigator = {this.props.navigator}/>
                        <StatisicalItem color = 'rgb(223,154,20)' topTxt = {ary[4].type} bottomTxt = {description4} mynavigator = {this.props.navigator}/>
                        {/*底部*/}
                        <StatisocalBottom mynavigator = {this.props.navigator}/>
                    </ScrollView>
                </View>
            )
        }else{
            return(
                <ActivityIndicator
                    animating={true}
                    style={{flex: 1,alignItems: 'center',justifyContent: 'center'}}
                    size="large" />
            )
        }


    }



    componentDidMount() {
        let url = 'http://rapapi.org/mockjsdata/18730/statisticspie'
        fetch(url)
            .then((response) => response.json())
            .then((json) => {
                this.setState({
                    pieDataAry:json.pie
                })

            })
    }


    leftAction =()=>{

    }

    rightAction =()=>{

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f7f7f7',
    },
});
